<template>
	<view class="content">
		<view class="header">
			<view class="status_bar" :style="{height:(statusBarHeight+statusBarTop)+'px'}"></view>
			<view class="searchbox" v-if="version">
				<view class="nav_icon" @click="linktotxjp">
					<uni-icons type="arrowleft" size="24" color="#FFFFFF"></uni-icons>
				</view>
				<view class="search" @click="navTopListClick(5)">
					<view>好物尽在{{names.name}}</view>
				</view>
			</view>
			<view class="search" v-else @click="navTopListClick(5)">
				<view>好物尽在{{names.name}}</view>
			</view>
		</view>
		<view class="other_tab">
			<scroll-view scroll-x show-scrollbar='false' scroll-with-animation class="scroll-view">
				<view class="other_tab_view" @click="activeTab(item,index)" :class="{activeTab:index == activeIndex}"
					v-for="(item,index) in other_tab" :key='index'>
					{{item.title}}
					<view class="activeLine" v-if="index == activeIndex"></view>
				</view>
			</scroll-view>
		</view>
		<view class="fixed_header" v-show="isShowFixedHeader">
			<view class="status_bar" :style="{height:(statusBarHeight+statusBarTop)+'px'}"></view>
			<view class="searchbox" v-if="version">
				<view class="nav_icon" @click="linktotxjp">
					<uni-icons type="arrowleft" size="24" color="#FFFFFF"></uni-icons>
				</view>
				<view class="search" @click="navTopListClick(5)">
					<view>好物尽在{{names.name}}</view>
				</view>
			</view>
			<view class="search" v-else @click="navTopListClick(5)">
				<view>好物尽在{{names.name}}</view>
			</view>
			<view class="fixed_header_tab">
				<scroll-view scroll-x show-scrollbar='false' scroll-with-animation class="scroll-view">
					<view class="other_tab_view" @click="activeTab(item,index)"
						:class="{activeTab_fixed_header:index == activeIndex}" v-for="(item,index) in other_tab"
						:key='index'>
						{{item.title}}
						<view class="activeLine_fixed_header" v-if="index == activeIndex"></view>
					</view>
				</scroll-view>
			</view>
		</view>
		<!-- 首页 -->
		<view class="body_content" v-if="activeIndex == 0">
			<!-- 滚动排行榜奖励显示 -->
			<view class="loop_notice" @click="navTopListClick(1)" v-if="noticeList.length>0">
				<swiper vertical circular :indicator-dots='false' autoplay :duration='200' :interval="4000">
					<swiper-item v-for="(item,index) in noticeList" :key='index'>
						<view class="loop_notice_item">
							<view>
								<image :src="item.headimgurl" style="width: 100%;" mode="widthFix"></image>
							</view>
							<view>恭喜{{item.nickname || '' |replaceName}}获得{{item.income}}元红包</view>
						</view>
					</swiper-item>

				</swiper>
			</view>
			<view class="tab_content">
				<swiper class="swiper" indicator-color='#ffffff' indicator-active-color='#F54642' circular
					indicator-dots autoplay :duration='200' :interval="4000">
					<swiper-item class="swiper-item " v-for="(item,index) in swiperList" :key='index'
						@click="swiperListClick(item)">
						<image :src="item.url" style="width: 100%;height: 100%;"></image>
					</swiper-item>

				</swiper>
				<view class="index_nav">
					<view class="index_nav_top">
						<view class="index_nav_top_item" v-for="(item,index) in navTopList"
							@click="navTopListClick(index)" :key='index'>
							<view class="index_nav_top_item_icon">
								<image style="width: 100%;display: block;" :src="item.url" mode="widthFix"></image>
							</view>
							<view class="index_nav_top_item_text">
								{{item.title}}
							</view>
						</view>

					</view>
					<view class="index_nav_bottom" @click="navTopListClick(6)">
						<view class="index_nav_bottom_left">
							<image src="../../../static/image/index/text3.png" mode="widthFix"></image>
						</view>
						<view class="index_nav_bottom_notice">
							<!-- <view class="notice">关注“优品速拍”公众号，精彩活动不走丢
							</view> -->
						</view>
					</view>
				</view>
				<view class="index_activity">
					<view class="index_activity_left" @click="navTopListClick(8)"
						:style="{backgroundImage: 'url('+IMGLink+'/index/killbg.png)'}">
						<view class="index_activity_top">
							<view>
								<image style="width:112rpx;height: auto;display: block;"
									src="../../../static/image/index/text2.png" mode="widthFix"></image>
							</view>
							<view>
								<text class="activeText">拼</text>:<text class="activeText">手</text>: <text
									class="activeText">速</text>
							</view>
						</view>
						<view class="index_activity_body">
							<view class="index_activity_body_item" v-for="item in msList" :key='item.id'>
								<view class="index_activity_body_item_img">
									<image :src="item.cover" mode=""></image>
								</view>
								<view class="index_activity_body_item_price">￥ <text>{{item.selling_price}}</text>
								</view>
							</view>
						</view>
					</view>
					<view class="index_activity_right" @click="navTopListClick(9)">
						<view class="index_activity_top">
							<view>
								<image style="width:112rpx;height: auto;display: block;"
									src="../../../static/image/index/text1.png" mode="widthFix"></image>
							</view>
							<view class="index_activity_top_bgtext">好物就要拼购</view>
						</view>
						<view class="index_activity_body">
							<view class="index_activity_body_item" v-for="item in swList" :key='item.id'>
								<view class="index_activity_body_item_img">
									<image :src="item.cover" mode=""></image>
								</view>
								<view class="index_activity_body_item_price">￥ <text>{{item.selling_price}}</text>
								</view>
							</view>
						</view>
					</view>
				</view>
				<!-- 商品区 -->
				<view class="pgae_commodity">
					<view class="pgae_commodity_title" @click="goShopping">
						<view class="pgae_commodity_title_left">
							<view class="pgae_commodity_title_line"></view>
							<text class="pgae_commodity_title_left_text">拼购推荐</text>
							<text class="pgae_commodity_title_left_tips">|　未购中领红包</text>
						</view>
						<view class="pgae_commodity_title_right">
							<text>查看更多</text>
							<uni-icons type="arrowright" size="12"></uni-icons>
						</view>
					</view>
					<view class="pgae_commodity_list">
						<commodityList :list="commodityList" @commodity_click='commodityClick'></commodityList>
					</view>
				</view>
			</view>
		</view>
		<!-- 其他tab -->
		<view class="body_content" v-if="activeIndex != 0">
			<view class="other_tab_banner">
				<image :src="otherTabBanner"></image>
			</view>
			<view>
				<commodityList :list="otherTabList" @commodity_click='commodityClick'></commodityList>
			</view>
		</view>
		<!-- 返回顶部 -->
		<view v-if="isBackTop" @click="backTop" class="back_top">
			<uni-icons type="arrowup" size="24" color="#FFFFFF"></uni-icons>
		</view>
		<!-- 新人现金红包弹窗 -->
		<view class="new_envelope" v-if="(userinfo && userinfo.is_all_complete == 0) || !hasRegister "
			@click="navTopListClick(4)">
			<image :src="IMGLink + '/index/new_envelope.gif'" mode="widthFix"></image>
		</view>
		<!-- 添加小程序引导 -->
		<view class="guide" @touchmove.stop.prevent="stopMove" v-show="isShowGuide" @click="isShowGuide=false">
			<view class="guide_box" :style="{top:statusBarTop+statusBarHeight+'px'}">
				<image :src="IMGLink + '/index/guide.png'" mode=""></image>
				<view class="text_box">
					<view class="text_box_1">
						添加小程序
					</view>
					<view class="text_box_2">
						<text>微信下拉</text>就能添加「{{names.name}}」
					</view>
					<view class="text_box_3">
						领取步骤
					</view>
					<view class="text_box_4">
						<text class="text_box_dot">1</text>点击右上角
					</view>
					<view class="text_box_4" style="margin-bottom: 168rpx;">
						<text class="text_box_dot">2</text>选择“添加到小程序”
					</view>
					<view class="text_box_4">
						<text class="text_box_dot">3</text>微信首页下拉，就能快速找回「{{names.name}}」
					</view>
				</view>
			</view>

		</view>
		<!-- 新人礼包弹窗 -->
		<newpeople></newpeople>

		<auth ref="auth" @successInfo='successInfo'></auth>
	</view>
</template>

<script>
	import { name_config, version } from "@/common/config.js"
	import {
		rankingList,
		topicList,
		topicGoodsList,
		indexGoodsList,
		specialList
	} from '@/api/index/index'
	import {
		mapState
	} from 'vuex'
	import commodityList from '../components/commodity-list.vue'
	import auth from '@/components/auth/auth'
	import newpeople from '@/components/newpeople/newpeople'
	export default {
		components: {
			commodityList,
			auth,
			newpeople,
		},
		computed: {
			...mapState(['userinfo', 'hasRegister'])
		},
		watch: {
			userinfo: {
				handler(val) {}
			}
		},
		data() {
			return {
				version: version,
				names: name_config,
				otherTabBanner: '',
				IMGLink: this.IMGLink,
				isShowGuide: false,
				noticeList: [],
				navTopList: [{
					title: '幸运抽奖',
					url: '../../../static/image/index/index1.png'
				}, {
					title: '排行榜单',
					url: '../../../static/image/index/index2.png'
				}, {
					title: '免保证金',
					url: '../../../static/image/index/index3.png'
				}, {
					title: '充值中心',
					url: '../../../static/image/index/index4.png'
				}],
				other_tab: [],
				activeIndex: 0,
				swiperList: [{
						url: this.IMGLink + '/index/banner1.png',
						type: 1
					},
					{
						url: this.IMGLink + '/index/banner2.png',
						type: 2
					}
				],
				statusBarHeight: 0,
				statusBarTop: 0,
				commodityList: [],
				otherTabList: [],
				isBackTop: false,
				toTop: 0,
				isShowFixedHeader: false,
				activeItem: {},
				page: 1,
				page_size: 15,
				total: 0,
				indexPage: 1,
				indexPageSize: 15,
				indexTotal: 0,
				msList: [],
				swList: [],
			}
		},
		async onLoad() {
			// 只在微信小程序内获取改数据
			//#ifdef MP-WEIXIN	
			let menuButtonInfo = uni.getMenuButtonBoundingClientRect()
			this.statusBarHeight = menuButtonInfo.height;
			this.statusBarTop = menuButtonInfo.top;
			//#endif
			this.load();
		},
		onReady() {
			const query = uni.createSelectorQuery().in(this);
			query.select('.body_content').boundingClientRect(data => {
				this.toTop = data.top;
			}).exec();
			this.$store.dispatch("updateUserInfo");
		},
		filters: {
			replaceName(str) {
				if (!str) return '***';
				return str.toString().replace(/^(.).+(.)$/g, "$1*$2");
			}
		},
		methods: {
			linktotxjp() {
				window.location.href = "http://txjp-test.bjtxjp.com/"
			},
			successInfo() {
				if (!uni.getStorageSync('isShowGuide')) {
					this.isShowGuide = true;
				}
				uni.setStorageSync('isShowGuide', true)
				this.load();
			},
			checkLogin() {
				this.$refs.auth.checkLogin();
			},

			load() {
				this.activeIndex = 0;
				this.page = 1;
				this.indexPage = 1;
				rankingList().then(({
					data: {
						list
					}
				}) => {
					this.noticeList = list;
				})
				topicList({
					type: 2
				}).then(({
					data
				}) => {
					this.other_tab = [{
						title: '首页'
					}, ...data];
				})
				indexGoodsList({
					page: this.indexPage,
					page_size: this.indexPageSize
				}).then(({
					data: {
						list: commodityList,
						total
					}
				}) => {
					this.commodityList = commodityList;
					this.indexTotal = total
				})
				specialList().then(({
					data: {
						swList,
						msList
					}
				}) => {
					this.swList = swList;
					this.msList = msList;
				})
			},

			swiperListClick({
				type
			}) {
				uni.navigateTo({
					url: `/pages/index/home/banner-detail?type=${type}`
				})
			},
			stopMove() {
				return false;
			},
			navTopListClick(index) {
				if ([0, 1, 3, 4, 8, 9].includes(index) && !uni.getStorageSync('hasRegister')) {
					this.checkLogin();
					return;
				}
				uni.navigateTo({
					url: this.getJumpUrl(index)
				});
			},
			goShopping() {
				uni.switchTab({
					url: '/pages/shopping/shopping'
				})
			},
			getJumpUrl(index) {
				switch (Number(index)) {
					case 0:
						return "/pages/activities/activitieslist/activitieslist"
					case 1:
						return '/pages/index/ranking-list/ranking-list'
					case 2:
						return '/pages/index/free-deposit/free-deposit?type=5&title=免保证金'
					case 3:
						return '/pagesA/my/account/charge'
					case 4:
						return '/pages/index/newcomer-mission/newcomer-mission'
					case 5:
						return '/pages/shopping/search/index'
					case 6:
						return '/pages/index/home/notice'
					case 8:
						return '/pages/index/shopping-second-kill/shopping-second-kill'
					case 9:
						return '/pages/index/free-deposit/free-deposit?type=3&title=拼购试玩'
				}
			},
			activeTab(item, index) {
				if (index != this.activeIndex) {
					this.page = 1;
					this.activeIndex = index;
					this.otherTabBanner = item.pic_url;
					this.activeItem = item;
					if (index != 0) {
						this.getTopicGoodsList();
					}
				}
			},
			getTopicGoodsList(isLoad = false) {
				const {
					page,
					page_size,
					activeItem: {
						id
					}
				} = this;
				topicGoodsList({
					id,
					page,
					page_size
				}).then(({
					data: {
						list,
						total
					}
				}) => {
					const dataList = isLoad ? [...this.otherTabList, ...list] : list;
					this.otherTabList = dataList;
					this.total = total
				})
			},
			commodityClick(data) {
				let url = '/pages/shopping/commodity/detail/index?id=' + encodeURIComponent(data.id)+'&index=1';
				if (data.topic_id) {
					url += '&topic_id=' + data.topic_id
				}
				uni.navigateTo({
					url: url
				})
			},
			onPullDownRefresh() {
				this.load()
				setTimeout(() => {
					uni.stopPullDownRefresh();
				}, 300)
			},
			onPageScroll({
				scrollTop
			}) {
				let time = 0;
				return (() => {
					const now = Date.now();
					if (now - time > 150) {
						const isBackTop = scrollTop > 600;;
						if (this.isBackTop != isBackTop) {
							this.isBackTop = isBackTop
						}
						const isShowFixedHeader = scrollTop >= this.toTop;
						if (this.isShowFixedHeader != isShowFixedHeader) {
							this.isShowFixedHeader = isShowFixedHeader
						}
						time = now;
					}
				})()
			},
			backTop() {
				uni.pageScrollTo({
					scrollTop: 0,
					duration: 200
				})
			},
			onReachBottom() {
				const {
					activeIndex,
					activeItem,
					page,
					page_size,
					total,
					otherTabList
				} = this;
				if (activeIndex != 0) {
					if (otherTabList.length < total) {
						this.page += 1;
						this.getTopicGoodsList(true);
					}
				} else {
					const {
						indexPage,
						indexTotal,
						commodityList
					} = this;
					if (commodityList.length < indexTotal) {
						this.indexPage += 1;
						indexGoodsList({
							page: this.indexPage,
							page_size: this.indexPageSize
						}).then(({
							data: {
								list
							}
						}) => {
							this.commodityList = [...this.commodityList, ...list];
						})
					}
				}
			},
			onShareAppMessage() {
				let icstr = encodeURIComponent(JSON.stringify({
					invitation_code: this.userinfo.invitation_code
				}))
				return {
					title: '拼团购',
					path: `/pages/index/home/index?scene=${icstr}`
				}
			}
		}
	}
</script>
<style>
	page {
		background: #EFF0F1;
	}
</style>
<style scoped>
	@import url("./index.css");
</style>
